<template>
    <Suspense>
        <template #default>
            <div class="note-list" v-if="data">
                <ul>
                    <li v-for="(item, index) in data" :key="item.id" @click="goNoteDetail(item.id)">
                        <div class="img">
                            <img :src="item.head_img" alt="" />
                        </div>
                        <div class="time">{{ item.c_time }}</div>
                        <div class="title">{{ item.title }}</div>
                    </li>
                </ul>
            </div>
        </template>
        <template #fallback>
            <div>Loading...</div>
        </template>
        <template #error="{ error }">
            <div>Error: {{ error.message }}</div>
        </template>
    </Suspense>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import axios from '../api/index';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();
const title = route.query.title;
const data = ref(null);

try {
    axios.get('/findNoteListByType', {
        params: {
            note_type: title,
        },
    }).then(res => {
        console.log(res);
        if (res.message == "登录过期，请重新登录") {
            router.push("/login")
        }
        data.value = res.data;
    })
} catch (error) {
    console.error(error);
}

const goNoteDetail = (id) => {
    router.push({ path: "/noteDetail", query: { id } })
}

document.title = `我的${title}`;
</script>

<style lang="less" scoped>
.note-list {
    width: 100%;
    padding: 1rem 0.667rem 0;
    box-sizing: border-box;

    ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 50px;
        grid-row-gap: 30px;

        li {
            font-size: 0.37rem;

            .img {
                width: 100%;
                height: 4rem;
                border-radius: 0.27rem;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .title {
                margin-top: 5px;
            }
        }
    }
}
</style>